<template>
  <view id="app">
    <view class="container">
      <view class="close"><u-icon class="Xicon" name="close"></u-icon></view>
      <view class="logo">
        <u-image
          style="width: 200px; height: 100px"
          mode="widthFix"
          src="/static/logo.png"
          alt=""
        ></u-image>
      </view>
      <view class="inputs">
        <u-input
          placeholder="请输入手机号"
          class="input"
          :custom-style="iptcss"
          v-model="userInfo.username"
        />
        <u-input
          placeholder="密码"
          class="input"
          :custom-style="iptcss"
          v-model="userInfo.password"
        />
      </view>
      <view class="tips">
        没有账号？
        <navigator url="/pages/register/register">
          <span class="register">去注册</span>
        </navigator>
      </view>
      <u-button
        shape="circle"
        class="button"
        :custom-style="btnStyle"
        @click="loginBtn"
      >
        <u-icon name="star"></u-icon> 登录</u-button
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      passwordIcon: false,
      // 输入框样式
      iptcss: {
        color: 'green',
      },
      // 按钮样式
      btnStyle: {
        backgroundColor: '#d31d0d',
        color: 'white',
        fontSize: '18px',
      },
      userInfo: {
        username: '13071519560', //用户名，手机
        password: '', //密码
      },
    };
  },
  methods: {
    async loginBtn() {
      // console.log(1);
      let list = await this.$u.post('/login', { ...this.userInfo });
      if (list.message === '登录成功') {
        // console.log('登录成功');
        uni.setStorageSync('hmtt-token', list.data.token);
        // 登录成功提示
        uni.showToast({
          title: '登录成功！',
          duration: 2000,
        });
        // 跳转页面
        setTimeout(() => {
          this.$u.route({
            url: 'pages/index/index',
          });
        }, 1500);
      } else {
        // 登录失败提示
        uni.showToast({
          title: '请输入正确的账号和密码',
          duration: 2000,
          icon: 'none',
        });
      }
    },
  },
};
</script>

<style lang="scss">
.container {
  padding: 20px;
  .close {
    .Xicon {
      // background-color: tomato;
      font-size: (27 / 360 * 100vw);
      color: #646970;
    }
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: (126 / 360 * 100vw);
    color: #d81e06;
  }
}
.inputs {
  input {
    margin-bottom: 20px;
    // background-color: tomato;
    border-bottom: 4rpx solid green;
  }
}
.tips {
  // background-color: tomato;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  .register {
    color: #3385ff;
  }
}
</style>
